<template>
    <div class="carousel-container">
        <!-- 搜索和添加 -->
        <div class="search">
            <el-input v-model="searchForm.title" placeholder="请输入标题" clearable style="width: 200px"></el-input>
            <el-select v-model="searchForm.state" placeholder="全部" clearable style="width: 120px">
                <el-option label="启用" :value="0"></el-option>
                <el-option label="禁用" :value="1"></el-option>
            </el-select>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="primary" @click="handleAdd">新增轮播图</el-button>
        </div>

        <!-- 表格 -->
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column prop="img" label="图片" align="center" width="120">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.img" :preview-src-list="[scope.row.img]"
                            style="width: 80px; height: 40px;" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="跳转链接" align="center"></el-table-column>
                <el-table-column prop="sort" label="排序" align="center" width="160">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.sort" @change="handleSortChange(scope.row)" :min="1"
                            :max="100"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.state" :active-value="0" :inactive-value="1"
                            @change="handleStateChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" width="180"></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 添加/编辑弹框 -->
        <el-dialog title="轮播图信息" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入轮播图标题"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="img">
                    <el-upload class="upload-demo" drag action="/api/file/upload" :on-success="handleUploadSuccess"
                        :limit="1" :file-list="fileList">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="跳转链接" prop="url">
                    <el-input v-model="form.url" placeholder="请输入跳转链接"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序号"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Carousel',
    data() {
        return {
            searchForm: {
                title: '',
                state: ''
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogVisible: false,
            form: {
                id: '',
                title: '',
                img: '',
                url: '',
                sort: 1,
                state: 1
            },
            rules: {
                title: [
                    { required: true, message: '请输入轮播图标题', trigger: 'blur' },
                ],
                img: [
                    { required: true, message: '请上传轮播图', trigger: 'change' }
                ],
                url: [
                    { required: true, message: '请输入跳转链接', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序号', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ]
            },

            fileList: []
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        // 加载数据
        loadData() {
            this.request.get('/carousel/page', {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    title: this.searchForm.title,
                    state: this.searchForm.state
                }
            }).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },

        // 搜索
        handleSearch() {
            this.currentPage = 1
            this.loadData()
        },

        // 新增
        handleAdd() {
            this.form = {
                id: '',
                title: '',
                img: '',
                url: '',
                sort: 1,
                state: 1
            }
            this.fileList = []
            this.dialogVisible = true
        },

        // 编辑
        handleEdit(row) {
            this.form = { ...row }
            this.fileList = row.img ? [{ name: row.title, url: row.img }] : []
            this.dialogVisible = true
        },

        // 删除
        handleDelete(id) {
            this.$confirm('确定要删除这条轮播图吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.request.delete('/carousel/' + id).then(() => {
                    this.$message.success('删除成功')
                    this.loadData()
                })
            }).catch(() => {
                this.$message.info('已取消删除')
            })
        },

        // 提交表单
        handleSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.request.post('/carousel', this.form).then(() => {
                        this.dialogVisible = false
                        this.$message.success('操作成功')
                        this.loadData()
                    })
                }
            })
        },

        // 上传成功回调
        handleUploadSuccess(res) {
            // 根据实际响应结构设置图片路径
            this.form.img = res.data ? res.data.url : res
            this.fileList = [{ name: this.form.title || '轮播图', url: this.form.img }]
        },

        // 状态切换
        handleStateChange(row) {
            this.request.post('/carousel', row).then(() => {
                this.$message.success('状态更新成功')
            }).catch(() => {
                row.state = !row.state
                this.$message.error('状态更新失败')
            })
        },

        // 排序变更
        handleSortChange(row) {
            this.request.post('/carousel', row).then(() => {
                this.$message.success('排序更新成功')
                this.loadData()
            }).catch(() => {
                this.loadData()
                this.$message.error('排序更新失败')
            })
        },

        // 分页处理
        handleSizeChange(size) {
            this.pageSize = size
            this.loadData()
        },
        handleCurrentChange(current) {
            this.currentPage = current
            this.loadData()
        }
    }
}
</script>

<style scoped>
.carousel-container {
    background-color: #fff;
}

.search {
    margin: 10px 0;

    .el-input {
        width: 150px;
        margin-right: 10px;
    }

    .el-select {
        width: 140px;
        margin-right: 10px;
    }
}

.table-container {
    margin-bottom: 20px;
}

.pagination {
    text-align: right;
}
</style>